<template>
  <!-- 用于接收地图的容器 -->
  <div id="mapContainer" style="width: 100%;height: 100%;"></div>
</template>

<script>
export default {
  mounted() {
    // 在生命周期函数中 调用创建地图的方法
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "512f6c20b1b6339bd2c6a6c829edbb09", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
              enableHighAccuracy: true, // 是否使用高精度定位，默认：true
              timeout: 10000, // 设置定位超时时间，默认：无穷大
              offset: [10, 20],  // 定位按钮的停靠位置的偏移量
              zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
              position: 'RB' //  定位按钮的排放位置,  RB表示右下
            })

            geolocation.getCurrentPosition(function (status, result) {
              if (status == 'complete') {
                onComplete(result)
              } else {
                onError(result)
              }
            });

            function onComplete(data) {
              // console.log(data.position.lng, data.position.lat);
              // data是具体的定位信息
              const map = new AMap.Map("mapContainer", {
                viewMode: '2D', //默认使用 2D 模式
                zoom: 16, //地图级别
                // 120.840163 31.472034
                center: [data.position.lng, data.position.lat], //地图中心点
              });

              //点标记 创建一个 Marker 实例：
              const marker = new AMap.Marker({
                position: new AMap.LngLat(data.position.lng, data.position.lat), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: "当前定位",
              });
              //将创建的点标记添加到已有的地图实例：
              map.add(marker);

            }

            function onError(data) {
              // 定位出错
              console.log(data);
            }
          })

        })
        .catch((e) => {
          console.error(e); //加载错误提示
        });
    }
  },
}
</script>

<style scoped></style>